<template>
  <div class="hot">
    <div class="title">{{ title }}</div>
    <category-good v-for="good in data"
                   :data="good"
                   :hover="false"
                   :img-size="200"
                   :width="280"/>
  </div>
</template>

<script lang="ts"
        setup>
import CategoryGood from '@/components/library/CategoryGood.vue'
import type {Good} from '@/types/good'

defineProps<{
  data?: Good[],
  title: string
}>()
</script>

<style lang="less"
       scoped>
.hot {
  width: 280px;

  > * {
    margin-bottom: 10px;
  }

  .title {
    color: white;
    height: 70px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background-color: #e26237;
    font-size: 18px;
  }
}
</style>